<script lang="ts" setup>
import type { Size } from "@/plugins/element.ts"
import { useAppStore } from "@/stores/app.ts"

const store = useAppStore()
const sizeOptions = ref([
  {
    label: "Default",
    value: "default"
  },
  {
    label: "Large",
    value: "large"
  },
  {
    label: "Small",
    value: "small"
  }
])
</script>

<template>
  <el-dropdown trigger="click">
    <span>
      <svg-icon
        custom-class="h-2em w-2em"
        icon-name="ant-design:font-size-outlined"
      ></svg-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item in sizeOptions"
          :key="item.value"
          :disabled="item.value === store.size"
          @click="store.setSize(item.value as Size)"
        >
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped></style>
